<template>
  <div class="login-plugin">
    <div class="login-content">
      <h2>
        <img src="@/assets/icons/logodark.png" />
      </h2>
      <!-- <div class="close-icon">
                <i class="el-icon-circle-close" @click="closeLogin"></i>
            </div> -->
      <div class="login-title">Login</div>
      <div class="key-label">Key</div>
      <div class="input-key">
        <input
          class="input-style"
          v-model="loginKey"
          type="text"
          id="sc-name"
          name="username"
          autocomplete="off"
          tabindex="1"
        />
        <div id="sc-login-info-success"></div>
        <div id="sc-login-info"></div>
      </div>
      <div class="login-button">
        <button id="btn-sc-login" @click="toLogin">Login</button>
      </div>
      <!-- onmouseover="this.style.border='1px solid #00A289\'" onmouseout="this.style.border=\'1px solid transparent\'" -->
      <div class="protocol">
        登录即同意Share Creators的
        <a href="https://product.sharecreators.cn/static/html/policy.html" target="_blank">隐私政策</a>
        和
        <a href="https://product.sharecreators.cn/static/html/terms.html" target="_blank">服务条款</a>
      </div>
    </div>
    <div
      class="close-sharecreators-not-open-modal"
      id="not-opened-modal-overlay"
      @click="closeLogin"
    ></div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { keyLogin } from "@/api/login";
import { Message } from "element-ui";
export default {
  name: "LoginPlugin",
  data() {
    return {
      loginKey: ""
    };
  },
  computed: {
  },
  methods: {
    closeLogin() {
      console.log("准备关闭了");
      this.$EventBus.$emit("changeCompant", "Popup");
    },
    async initConfig() {
      console.log("执行登录初始化");
      let that = this;
      if (chrome && chrome.storage && chrome.storage.local) {
        console.log("使用chrome.storage 获取登录信息");
        chrome.storage.local.get(["bid", "token", "loginInfo"]).then(result => {
          if (result.loginInfo) {
            // 重定向到登录页面
            that.$EventBus.$emit("changeCompant", "Popup");
          }
        });
      }
    },
    async toLogin() {
      if (chrome && chrome.storage && chrome.storage.sync) {
        console.log("使用chrome.storage 存储登录信息");
        chrome.storage.sync.set({ bid: "bid", token: "token" }, function () {
          console.log("保存成功！");
        });
      }
      let keyObj;
      try {
        keyObj = JSON.parse(atob(this.loginKey));
      } catch {
        this.$message.error({
          customClass: 'el-message-index',
          message:"无效的密钥"
        });
        return;
      }
      console.log(keyObj);
      const params = {
        loginKey: this.loginKey,
        keyType: "CHROME_PLUGIN"
      };
      let baseUrl;
      try {
        baseUrl = atob(keyObj.baseUrl);
      } catch {
        this.$message.error({
          customClass: 'el-message-index',
          message:"无效的密钥"
        });
        return;
      }
      await chrome.storage.local.set({ baseUrl });
      console.log("存储", { baseUrl });
      const { _success, data, _msg } = await keyLogin(params);
      console.log("登录结果", { _success, data, _msg });
      if (!_success) {
        console.log("为什么无效呢");
        this.$message.error({
          customClass: 'el-message-index',
          message:_msg || "操作失败"
        });
        return;
      }
      if (chrome && chrome.storage && chrome.storage.local) {
        let that = this;
        //console.log("使用chrome.storage 存储登录信息")
        let saveObj = {
          bid: data.bid,
          token: data.token,
          loginInfo: JSON.stringify(data),
          loginKey: this.loginKey
        };
        chrome.storage.local.set(saveObj).then(() => {
          that.$EventBus.$emit("changeCompant", "Popup");
        });
      }
      if (!this.loginKey) return;
    }
  },
  created() {
    this.initConfig();
  }
};
</script>

<style scoped lang="scss">
.login-plugin {
  position: fixed;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 99 !important;

  .login-content {
    overflow: hidden;
    z-index: 98 !important;
    position: relative !important;
    top: 50% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-50%) !important;
    width: 340px !important;
    background-color: #323642 !important;
    border-radius: 4px;
    padding: 24px;
    h2 {
      font-size: 18px;
      color: #ffffff;
      text-align: left;
      img {
        width: 110px;
      }
    }

    .close-icon {
      position: absolute;
      right: 12px;
      top: 12px;
      height: 40px;
      width: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-size: 20px;
      color: #d1d1d1;

      &:active {
        opacity: 0.6;
      }
    }

    .login-title {
      color: #d1d1d1;
      text-align: center;
      font-size: 18px;
      margin: 40px 0;
      font-weight: bold;
    }
    .key-label {
      text-align: left;
      font-size: 14px;
      color: #d1d1d1;
      margin-bottom: 12px;
    }

    .input-key {
      width: 100%;
      position: relative;

      .input-style {
        width: calc(100% - 20px);
        color: #d1d1d1;
        vertical-align: middle;
        border-radius: 5px;
        background: #2b2e39;
        border: 1px solid transparent;
        height: 40px;
        padding: 0 10px;
        outline: none;

        &:focus {
          border: 1px solid #00a289;
        }
      }
      .sc-login-info-success {
        position: absolute;
        top: 44px;
        left: 0;
        height: 20px;
        color: #00a289;
      }

      .sc-login-info {
        position: absolute;
        top: 44px;
        left: 0;
        height: 20px;
        color: #ff6969;
      }

      &:hover {
        .input-style {
          border: 1px solid #00a289;
        }
      }
    }
    .login-button {
      text-align: center;
      width: 100%;
      margin-top: 60px;
      cursor: pointer;

      #btn-sc-login {
        color: white;
        outline: none !important;
        border: none;
        width: 100%;
        height: 40px;
        background: #00a289;
        text-align: center;
        cursor: pointer;
      }
    }

    .protocol {
      color: #888c99;
      margin-top: 50px;

      a {
        text-decoration: none;
        color: #00a289;
      }
    }
  }

  .close-sharecreators-not-open-modal {
    cursor: pointer;
    z-index: 97 !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4) !important;
  }
}
</style>